<template>
  <Modal v-model="visible"
         title="编辑资源"
         @on-cancel="closeModal"
         footer-hide
         :width="620">
    <Form ref="form" :model="form" :rules="rules"
          :label-width="100">
      <FormItem label="资源名" prop="name">
        <Input v-model="form.name" placeholder="请输入资源名"></Input>
      </FormItem>
      <FormItem label="图标" prop="icon">
        <IconSelector v-model="form.icon" ref="iconSelector"></IconSelector>
      </FormItem>
      <FormItem label="权限" prop="permission">
        <Input v-model="form.permission" placeholder="请输入权限"></Input>
      </FormItem>
      <FormItem label="地址" prop="url">
        <Input v-model="form.url" placeholder="请输入地址"></Input>
      </FormItem>
      <FormItem label="资源类型" prop="type">
        <DictSelector v-model="form.type"
                      placeholder="请选择资源类型"
                      :code="resourceType"></DictSelector>
      </FormItem>
      <FormItem label="上级资源" prop="parentIds">
        <Cascader v-model="form.parentIds" placeholder="请选择资源类型"
                  :data="menus" change-on-select></Cascader>
      </FormItem>
      <FormItem label="排序" prop="sort">
        <InputNumber :min="0" :step="1" v-model="form.sort"></InputNumber>
      </FormItem>
      <FormItem>
        <Button type="primary" :loading="submitting" @click="submit">提交</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import IconSelector from './iconSelector.vue';
import { DictSelector } from '../../../../components/dictSelector';

import { menuTree, resourceDetail, updateResource } from '../../../../apis/system/resource';

export default {
  name: 'create',
  components: {
    IconSelector,
    DictSelector
  },
  data() {
    return {
      visible: false,
      id: '',
      form: {
        name: undefined,
        icon: undefined,
        permission: undefined,
        url: undefined,
        type: undefined,
        parentIds: [],
        sort: 0,
      },
      rules: {
        name: [
          { required: true, message: '请输入资源名', trigger: 'blur' }
        ],
        permission: [
          { required: true, message: '请输入权限', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择资源类型', trigger: 'change' }
        ],
      },
      resourceType: this.$constant.RESOURCE_TYPE,
      menus: [],
      submitting: false
    };
  },
  methods: {
    openModal(id) {
      this.visible = true;
      this.id = id;
      this.initMenus();
      this.initData();
    },
    initMenus() {
      menuTree((responseData) => {
        this.menus = this.getMenus(responseData);
      });
    },
    getMenus(menus) {
      const resultMenus = [];
      this.$lodash.forEach(menus, (item) => {
        const menu = {
          value: item.id,
          id: item.id,
          label: item.name,
          title: item.name
        };
        if (item.children && item.children.length > 0) {
          menu.children = this.getMenus(item.children);
        }
        resultMenus.push(menu);
      });
      return resultMenus;
    },
    initData() {
      resourceDetail(this.id, (responseData) => {
        this.form.name = responseData.name;
        this.form.icon = responseData.icon;
        this.form.permission = responseData.permission;
        this.form.url = responseData.url;
        this.form.type = this.$json.parse(responseData.type) ? this.$json.parse(responseData.type).value : undefined;
        this.form.parentIds = responseData.parentIds;
        this.form.sort = responseData.sort;
      });
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitting = true;

          const parentId = this.form.parentIds && this.form.parentIds.length > 0
            ? this.form.parentIds[this.form.parentIds.length - 1] : undefined;
          updateResource(this.id, {
            name: this.form.name,
            icon: this.form.icon,
            permission: this.form.permission,
            url: this.form.url,
            parentId,
            type: this.form.type,
            sort: this.form.sort
          }, () => {
            this.submitting = false;

            this.$Message.success('保存成功');
            this.closeModal();
            this.$refs.form.resetFields();
            this.$emit('success');
          }, () => {
            this.submitting = false;
          });
        }
      });
    },
    closeModal() {
      this.visible = false;
    },
  }
};
</script>

<style scoped>

</style>
